<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		
		<h1 v-for="(item,index) in list">
			第{{index+1}}件事:{{item}}
		</h1>
		<h1 v-for="i in 11">{{i-1}}</h1>
		<h1 v-for="(value,key) in student">
			{{key}}:{{value}}
		</h1>
		
		<ul>
			<li v-for="(item,index) in goods">
				商品名称：{{item.title}}<br>
				商品价格：{{item.price}}
			</li>
		</ul>
		<table border="1">
			<tr v-for="row in table">
				<td v-for="col in row">{{col}}</td>
			</tr>
		</table>
		</div>
		<script>
			Vue.createApp({
				data(){
					return {
						
						list:['吃饭','睡觉','学习'],//定义一个数组
						student:{
							name:"张三",
							cls:"软技2306"
						},
						goods:[//商品列表
							{
							title:'华为',
							price:1999
							},
							{
							title:'小米',
							price:1899
							}
						],
						table:[
							[1,2,3,9,0,0],
							[1,2,3,0,9,0],
							[1,2,3,0,0,9]
						]
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>